<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: #6ff;
            text-align: center;
            line-height: 200px;
        }

        #BOX {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: pink;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <!-- 属性(html属性):写在标签内,和标签名以一个空格分隔的叫做属性(属性名="属性值"),多个属性之前用空格分隔 -->
    <div id="box" class="one two three" title="hello">box</div>
    <!-- 1111 -->
</body>
<script>
    // 注意:
    // 1. 属性节点是依存于元素节点  => 获取属性节点先获取元素节点
    // 2. 所有的节点都是对象类型  
    // 3. 文本节点和注释节点无法直接获取 => 只能间接通过父元素 同级元素获取

    // var box = document.getElementById("box");
    // console.log(box, typeof box);  // box.style box.innerHTML

    // 获取和操作属性节点
    // a. 获取属性节点
    // Element.getAttributeNode("属性名")  对应属性名获取属性节点(属性名=属性值)
    // var idAttr = box.getAttributeNode("id");
    // console.log(idAttr, typeof idAttr);

    // 操作属性节点 (取值和赋值)
    // 获取 属性节点的属性名和属性值
    // console.log(idAttr.nodeName);   //属性节点的节点名称 => 属性名
    // console.log(idAttr.nodeValue);  //属性节点的节点值 => 属性值(取值和赋值)

    // 设置  属性节点属性值 (属性名只能获取不能修改)
    // idAttr.nodeValue = "BOX";



    // Element.getAttribute(attrName)            根据属性名获取属性值(取不到就返回null)
    // Element.setAttribute(attrName,attrValue)  根据属性名设置属性值 (没有就新增 有就修改)
    // Element.removeAttribute(attrName)         根据属性名删除属性

    var box = document.getElementById("box");

    // getAttribute()
    // var id = box.getAttribute("id");
    // console.log(id);

    // var _class = box.getAttribute("class");
    // console.log(_class);

    // var title = box.getAttribute("title");
    // console.log(title);

    // var asd = box.getAttribute("asd");
    // console.log(asd);


    // setAttribute()    => undefined
    // 官方
    box.setAttribute("id", "BOX");
    box.setAttribute("class", "first second third");
    box.setAttribute("title", "你好!");

    // 自定义属性 => 用户可以根据自己的需要 在标签内自定义属性(属性名="属性值")  => 属性值只能是字符串
    // 如何设置自定义属性
    // 1. 官方建议:data-xxx="xxx"
    // 2. 不添加data-前缀  asd="asd"
    box.setAttribute("data-id", 100);
    box.setAttribute("data-id", 200);


    // removeAttribute(attrName)   => undefined
    box.removeAttribute("id");
    box.removeAttribute("class");
    box.removeAttribute("title");
    box.removeAttribute("data-id");





</script>

</html>